<template>
  <view>
    <view class="cu-custom" :style="[{ height: CustomBar + 'px' }]">
      <view class="cu-bar fixed" :style="style" :class="[bgImage != '' ? 'none-bg text-white bg-img' : '', bgColor]">
        <view v-if="isBack" class="action" @tap="BackPage">
          <text class="cuIcon-back"></text>
          <slot name="backText"></slot>
        </view>
        <view class="content" :style="[{ top: StatusBar + 'px' }]">
          <slot name="content"></slot>
        </view>
        <slot name="right"></slot>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'CuCustom',
  props: {
    bgColor: {
      type: String,
      default: ''
    },
    isBack: {
      type: [Boolean, String],
      default: false
    },
    bgImage: {
      type: String,
      default: ''
    },
    isCustomBack: {
      type: [Boolean, String],
      default: false
    }
  },
  emits: ['custom-back'],
  // eslint-disable-next-line prettier/prettier
  data () {
    return {
      StatusBar: this.StatusBar,
      CustomBar: this.CustomBar
    }
  },
  computed: {
    // eslint-disable-next-line prettier/prettier
    style () {
      const StatusBar = this.StatusBar
      const CustomBar = this.CustomBar
      const bgImage = this.bgImage
      let style = `height:${CustomBar}px;padding-top:${StatusBar}px;`
      if (this.bgImage) {
        style = `${style}background-image:url(${bgImage});`
      }
      return style
    }
  },
  methods: {
    // eslint-disable-next-line prettier/prettier
    BackPage () {
      // if (getCurrentPages().length < 2 && 'undefined' !== typeof __wxConfig) {
      //   const url = '/' + __wxConfig.pages[0]
      //   return uni.redirectTo({ url })
      // }
      if (this.isCustomBack) {
        this.$emit('custom-back', this.isCustomBack)
      } else {
        uni.navigateBack({
          delta: 1
        })
      }
    }
  }
}
</script>
